<template>
  <div class="app-container">
    <el-form ref="form" :model="queryParam" :inline="true">
      <el-form-item prop="name" label="页面名称" :label-width="formLabelWidth">
        <el-input v-model="queryParam.name" placeholder="页面名称" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="type" label="页面类型" :label-width="formLabelWidth">
        <el-input v-model="queryParam.type" placeholder="页面类型" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="image" label="页面预览图" :label-width="formLabelWidth">
        <el-input v-model="queryParam.image" placeholder="页面预览图" type="upload">
        </el-input>
      </el-form-item>
      <el-form-item prop="memo" label="备注" :label-width="formLabelWidth">
        <el-input v-model="queryParam.memo" placeholder="备注" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="platform" label="适用平台" :label-width="formLabelWidth">
        <el-input v-model="queryParam.platform" placeholder="适用平台" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="page_title" label="页面标题" :label-width="formLabelWidth">
        <el-input v-model="queryParam.page_title" placeholder="页面标题" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="page_path" label="页面路径" :label-width="formLabelWidth">
        <el-input v-model="queryParam.page_path" placeholder="页面路径" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="user_id" label="关联users表id" :label-width="formLabelWidth">
        <el-input v-model="queryParam.user_id" placeholder="关联users表id" type="select">
        </el-input>
      </el-form-item>
      <el-form-item prop="appstore_user_id" label="关联appstore用户id" :label-width="formLabelWidth">
        <el-input v-model="queryParam.appstore_user_id" placeholder="关联appstore用户id" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="status" label="状态" :label-width="formLabelWidth">
        <el-input v-model="queryParam.status" placeholder="状态" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="edit_status" label="编辑状态" :label-width="formLabelWidth">
        <el-input v-model="queryParam.edit_status" placeholder="编辑状态" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="tags" label="分类标签" :label-width="formLabelWidth">
        <el-input v-model="queryParam.tags" placeholder="分类标签" type="input">
        </el-input>
      </el-form-item>
      <el-form-item prop="description" label="页面说明" :label-width="formLabelWidth">
        <el-input v-model="queryParam.description" placeholder="页面说明" type="input">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="center">
    </el-divider>
    <div class="filter-container">
      <el-row>
        <el-col :span="12">
          <div class="grid-content">
            <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate()">添加</el-button>
            <el-button v-if="this.selectedIds.length" size="small" class="filter-item mb-5" type="danger" icon="el-icon-delete" @click="handleMultiDelete">批量删除</el-button>
            <el-button @click="clearFilter">清除所有过滤器</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <el-button icon="el-icon-info" circle @click="templateVersion" style="float: right; padding: 3px 0">
          </el-button>
          <el-dropdown @command="handleTableCommand" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
              <i class="el-icon-more el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">配置表格</el-dropdown-item>
              <el-dropdown-item command="b" divided>移除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="grid-content">
            <el-dropdown @command="handleDropdownCommand" style="float: right; padding: 3px 0">
              <span class="el-dropdown-link">
                <i class="el-icon-menu el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-checkbox-group v-model="checkList">
                  <el-dropdown-item command="a">
                    <el-checkbox label="name">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="type">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="image">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="memo">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="platform">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="page_title">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="page_path">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="user_id">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="appstore_user_id">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="status">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="edit_status">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="tags">
                    </el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-checkbox label="description">
                    </el-checkbox>
                  </el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" fit @selection-change="handleSelectMulti">
      <el-table-column type="selection" width="55" v-if="true">
      </el-table-column>
      <el-table-column prop="name" label="页面名称" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="type" label="页面类型" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="image" label="页面预览图" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="memo" label="备注" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="platform" label="适用平台" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="page_title" label="页面标题" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="page_path" label="页面路径" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="user_id" label="关联users表id" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="appstore_user_id" label="关联appstore用户id" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="status" label="状态" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="edit_status" label="编辑状态" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="tags" label="分类标签" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="description" label="页面说明" show-overflow-tooltip v-if="true">
      </el-table-column>
      <el-table-column prop="creator" label="创建人" v-if="true">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" v-if="true">
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" v-if="true">
      </el-table-column>
      <el-table-column label="操作" v-if="true" fixed="right">
        <template slot-scope="module">
          <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(module.row)">
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(module.row.id)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginate.current" hide-on-single-page :page-sizes="paginate.sizes" :page-size="paginate.limit" :layout="paginate.layout" :total="paginate.total">
    </el-pagination>
    <!----------------------------------- 新增/编辑 ---------------------------------------------->
    <el-drawer ref="drawer" size="60%" :title="drawerTitle" :visible.sync="formVisible" :before-close="handleClose" direction="rtl" @close="handleCancel">
      <div class="demo-drawer__content">
        <el-form :ref="formName" :model="formFieldsData" :rules="rules">
          <el-form-item prop="name" label="页面名称" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.name" placeholder="页面名称" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="type" label="页面类型" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.type" placeholder="页面类型" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="image" label="页面预览图" :label-width="formLabelWidth">
            <template>
              <el-upload class="uploader" ref="imageupload" :action="imageAction" :show-file-list="true" :headers="headers" multiple :limit="1" :on-exceed="handleimageExceed" :on-success="handleimageSuccess" :on-remove="handleimageRemove" :before-upload="beforeimageUpload" :file-list="imagefileList" :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitimageUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
              </el-upload>
            </template>
          </el-form-item>
          <el-form-item prop="memo" label="备注" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.memo" placeholder="备注" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="platform" label="适用平台" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.platform" placeholder="适用平台" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="page_title" label="页面标题" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.page_title" placeholder="页面标题" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="page_path" label="页面路径" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.page_path" placeholder="页面路径" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="user_id" label="关联users表id" :label-width="formLabelWidth">
            <template>
              <el-select v-model="formFieldsData.user_id" allow-create filterable remote placeholder="关联users表id" clearable :remote-method="queryuser_idOptionList" :loading="loading">
                <el-option v-for="item in user_idOptionList" :key="item.id" :label="item.username" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item prop="appstore_user_id" label="关联appstore用户id" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.appstore_user_id" placeholder="关联appstore用户id" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="status" label="状态" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.status" placeholder="状态" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="edit_status" label="编辑状态" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.edit_status" placeholder="编辑状态" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="tags" label="分类标签" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.tags" placeholder="分类标签" type="text" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
          <el-form-item prop="description" label="页面说明" :label-width="formLabelWidth">
            <template>
              <el-input v-model="formFieldsData.description" placeholder="页面说明" type="textarea" autocomplete="off" clearable>
              </el-input>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="drawer__footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import {getToken} from '@/utils/auth';
  import formOperate from '@/layout/mixin/formOperate';
  export default {
  	name: 'develop_vueEditorPages',
  	mixins: [formOperate],
  	data () {
  		return {
  			url: 'vueEditorPages',
  			formName: 'vue_editor_pages',
  			formLabelWidth: '120px',
  			queryParam: {
  				name:'',type:'',image:'',memo:'',platform:'',page_title:'',page_path:'',user_id:'',appstore_user_id:'',status:'',edit_status:'',tags:'',description:'',
  			},
  			formVisible: false,
  			formFieldsData: {
  				name:'',type:'',image:'',memo:'',platform:'',page_title:'',page_path:'',user_id:'',appstore_user_id:'',status:'',edit_status:'',tags:'',description:'',
  			},
  			loading: false,
  			checkList: [],
  			search: '',
  			drawerTitle: 'vue_editor_pages',
  			form: {
  				name:'',type:'',image:'',memo:'',platform:'',page_title:'',page_path:'',user_id:'',appstore_user_id:'',status:'',edit_status:'',tags:'',description:'',
  			},
  			timer: null,
  			rules: {},
  			headers: {
  				authorization: 'Bearer ' + getToken()
  			},
  			imageAction: process.env.VUE_APP_BASE_API + '/upload/image',
  			fileAction: process.env.VUE_APP_BASE_API + '/upload/file',
  			imagefileList: [],
  			user_idOptionList: []
  		};
  	},
  	computed: {},
  	watch: {
  		formFieldsData: {
  			handler (data) {
  				if (data.image) {
  					this.imagefileList = JSON.parse(this.formFieldsData.image);
  				}
  			},
  			deep: true
  		}
  	},
  	mounted () {
  		this.init();
  	},
  	methods: {
  		init () {
  			this.$http.get("users").then((response) => {
  				this.user_idOptionList = response.data;
  			});
  		},
  		beforeimageUpload (file) {
  			const image = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif';
  			if (!image) {
  				this.$message.error('只支持 jpg/jpeg/png/gif 格式!');
  			}
  			let isLtSize = false;
  			isLtSize = file.size / 1024 / 1024 < 5;
  			if (!isLtSize) {
  				this.$message.error('最大支持 5MB!');
  			}
  			return image && isLtSize;
  		},
  		handleimageSuccess (response, file, fileList) {
  			let filesData = [];
  			fileList.forEach(function (item, index) {
  				if (item.url) {
  					filesData.push({
  						'name': item.name,
  						'url': item.url
  					});
  				} else {
  					if (response.data) {
  						filesData.push({
  							'name': item.name,
  							'url': response.data
  						});
  					}
  				}
  			});
  			this.formFieldsData.image = JSON.stringify(filesData);
  			this.imagefileList = fileList;
  		},
  		handleimageExceed (files, fileList) {
  			this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  		},
  		submitimageUpload () {
  			this.$refs.imageupload.submit();
  		},
  		handleimageRemove (file, fileList) {
  			let filesData = [];
  			fileList.forEach(function (item, index) {
  				if (item.url) {
  					filesData.push({
  						'name': item.name,
  						'url': item.url
  					});
  				}
  			});
  			this.formFieldsData.image = JSON.stringify(filesData);
  		},
  		queryuser_idOptionList (query) {
  			if (query !== '') {
  				this.loading = true;
  				this.$http.get("users" + "?username=" + query).then((response) => {
  					this.loading = false;
  					this.user_idOptionList = response.data;
  				});
  			} else {
  				this.options = [];
  			}
  		}
  	}
  };
</script>
<style lang="scss">
  .el-drawer {
    overflow: scroll;
  }
</style>
